<div class="container">
  <form  class="form-signin" [formGroup]="signInForm" (ngSubmit)="onSubmit()">
    <h2 class="form-signin-heading">sign in now</h2>
    <div class="login-wrap">
      <div class="login-input-item">
        <input type="text" class="form-control" placeholder="Your user name." required formControlName="username" autocomplete="off">
        <div *ngIf="signInForm.get('username').errors && signInForm.get('username').touched" >
          <span class="login-error-icon text-danger">!</span>
          <p class="login-error-message text-danger">{{signInForm.get('username').errors.msg || 'please enter a valid username.'}}</p>
        </div>
      </div>
      <div class="login-input-item">
        <input type="password" class="form-control" placeholder="Enter Password." required formControlName="password" autocomplete="off">
        <div *ngIf="signInForm.get('password').errors && signInForm.get('password').touched" >
          <span class="login-error-icon text-danger">!</span>
          <p class="login-error-message text-danger">{{signInForm.get('password').errors.msg || 'password must be at least 6 characters'}}</p>
        </div>
      </div>
      <button class="btn btn-success">Sign in</button>
      <div style="height: 10px;"></div>
      <div class="registration">
        Don't have an account yet?
        <a href="/auth/register" routerLink="/auth/register">Create an account</a>
      </div>
    </div>
  </form>
  <hr/>
  <div class="col-md-6">
    <small>&copy; 2017 Ecool LTEK &nbsp;&nbsp;|&nbsp;&nbsp; 深圳易酷创新软件有限公司</small>
  </div>
  <div class="col-md-6">
    <small>Easy Data | Data Cloud</small>
  </div>
</div>
